<!DOCTYPE HTML PUBLIC>
<html>
<head>
</head>
<body style="margin-bottom: 0px;" aria-hidden="true" chromevoxignoreariahidden="true" role="application"
      chromevoxoriginalrole="null">

<div>
    A form element without a label: <input type="text"></input>
</div>
<div>
    <label>A form element <input type="text" aria-label="Screenreader-only label"></input> with two types of
        labels</label>
</div>
<div>
    <span id="aria-label-incorrect">An incorrectly identified aria-labelledby</span>
    <input type="text" aria-labelledby="aria-label"></input>
</div>
<div>
    <span id="aria-label-correct" style="display: none">A correctly identified aria-labelledby</span>
    <input type="text" aria-labelledby="aria-label-correct"></input>
</div>
<div>
    <span id="aria-label-1">Multiple</span> <span id="aria-label-2">aria-labelledby values</span>
    <input type="text" aria-labelledby="aria-label-1 badidref aria-label-2"></input>
</div>
<div>
    <label for="forInput">A form element with <code>label for=</code></label><input type="text" id="forInput"></input>
</div>
<div>
    <label for="forInput2">A form element with multiple</label><label for="forInput2"><code>label
    for=</code></label><input type="text" id="forInput"></input>
</div>
<div>
    <span id="label1">Delete history after</span>
    <input type="number" id="numberfield" aria-labelledby="label1 numberfield label2">
    <span id="label2">days</span>
</div>
<div>Click on this link:
    <span tabindex="0" class="customlink"
          onclick="alert('activated!')" onkeydown="handlekey(event);">Click</span>
</div>
<script>
    function handlekey(event) {
        var target = event.target || event.srcElement;
        if (event.keyCode == 13) {
            target.onclick();
        }
    }
</script>
<div id="subpage">
    <label for="forInput2">A form element with</label> <label for="forInput2">multiple <code>label for=</code>
    values</label>
    <input type="text" id="forInput2"></input>
</div>
<div>
    <span role="badariarole">A span with a non-existent ARIA role</span>
</div>
<div>
    <div style="cursor: pointer; background: #CCC; padding: 5px; border-radius: 3px; width: 60px;" id="deceptive">A
        button
    </div>
    <div style="cursor: pointer; background: #CCC; padding: 5px; border-radius: 3px; width: 60px;" role="button"
         id="deceptive-aria">An ARIA button
    </div>
    <img src="./images/button.png" id="deceptive-img"></img>
    <img src="./images/button.png" id="deceptive-img"></img>
    <img src="./images/button.png" id="deceptive-img"></img>
    <img src="./images/button.png" id="deceptive-img"></img>
    <img src="./images/button.png" id="deceptive-img"></img>
    <img src="./images/button.png" id="deceptive-img"></img>
    <img src="./images/button.png" id="deceptive-img"></img>
    <script>
        document.getElementById("deceptive").addEventListener("click", function () {
            alert("I'm not actually a button");
        });
        document.getElementById("deceptive-aria").addEventListener("click", function () {
            alert("I'm not actually a button either, but I play one on screenreaders");
        });
        document.getElementById("deceptive-img").addEventListener("click", function () {
            alert("I'm not a button either! Hahaha!");
        });
        window.setTimeout(function () {
            var focusable = document.getElementById("focusable");
            var str = "<div role='main'></div><div role='main'></div>";
            focusable.insertAdjacentHTML('beforeend', str);
        }, 2000);
    </script>
    <div>
        Buttons without <code>value</code> attribute:
        <button type="button" value="Hello" onclick="console.inspect(document.getElementById('forInput'));">Hello
        </button>
        <input type="button"></input>
        <input type="submit"></input>
    </div>
</div>
<label for="someInput">This tape will self destruct in <input type="range" min="0" max="10" value="5"> seconds.</label>
<input type="button" id="someInput">

<div>
    <img src="./images/chrome.png" title="chrome"/>
    <img src="./images/chrome.png" alt=""/>
    <img src="./images/chrome.png" role="presentation"/>

    <div style="color: #888">Low contrast text</div>
    <div style="color: #888; font-size: 18pt;">Large text</div>
    <div style="color: #999; font-size: 18pt;">Large low-contrast text</div>
    <div style="font-size: 10px;" id="absolute">Absolute sized text</div>
    <style>
        .bgimage {
            background-image: url(https://lh5.googleusercontent.com/-sCg4gG_WAnM/UNS3_JRkvVI/AAAAAAAAAyk/8OT1wOmSC30/s16-c-k/icon_11_document_list.png);
            display: inline-block;
            height: 16px;
            width: 16px;
        }

        .bgImageNone {
            background-image: none;
        }

        .bigbgimage {
            background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Google_Chrome_icon_%282011%29.svg/150px-Google_Chrome_icon_%282011%29.svg.png);
            height: 150px;
            width: 150px;
        }
    </style>
  <span>
    A small image in the background (div): <div id="backgroundiconDiv" title="Drive Document" class="bgimage"></div><br>
    A small image in the background (span): <span id="backgroundiconSpan" title="Drive Document" class="bgimage"></span><br>
    A small image in the background with text content (will no be flagged): <span title="Drive Document"
                                                                                  class="bgimage">Text</span><br>
    A 'none' image in the background (will no be flagged): <span title="Drive Document" class="bgimageNone"></span><br>
    A large image in the background (will not be flagged): <div title="Big image" class="bigbgimage"></div>
  </span>
    <style>
        .absolute {
            font-size: 12px;
        }
    </style>
    <div class='absolute'>
        Absolute sized text from class
    </div>
    <!--
      <video controls autobuffer id="videoTest" width="800px">
        <source src="videos/arduino.webm" type="video/webm" />
        <track kind="captions" src="videos/arduino-en.vtt" type="text/vtt" srclang="en" label="English Captions" default />
        <track kind="subtitles" src="videos/arduino-en.vtt" type="text/vtt" srclang="en" label="English Subtitles" default />
        <track kind="descriptions" src="videos/arduino-en.vtt" type="text/vtt" srclang="en" label="English Descriptions" default />
        <track kind="chapters" src="videos/arduino-en.vtt" type="text/vtt" srclang="en" label="English Chapters" default />
        This is the <span style="font-style: italic">fallback content</span>.
      </video>
      <video controls autobuffer id="videoTest" width="800px">
        <source src="videos/arduino.webm" type="video/webm" />
      </video>
    -->
    <audio autoplay id="audioTest" src="005.ogg" type="audio/ogg; codecs=vorbis"></audio>
    <div id="ariahidden" aria-hidden="true" tabindex="0" style="height: 20px;">ARIA-hidden</div>
    <div id="notariahidden" tabindex="0">Not ARIA-hidden</div>
    <div id="overlapping"
         style="font-size: 48px; position: relative; top: -40px; height: 40px; background: rgba(255, 255, 255, 0.5);">
        Overlapping div
    </div>
    <div id="aria-invalid" role="textbox" aria-invalid="flurble">Eat my shorts</div>
    <div id="menu-label-test">Using the
        <div role="menu">
            <div role="menuitemcheckbox" aria-checked="true">Selected menu item</div>
            <div role="menuitemcheckbox" aria-checked="false">Not selected menu item</div>
        </div>
        in the computed label
    </div>
    <div role="textbox" aria-labelledby="menu-label-test"/>
    <div role="menu list">An element with multiple ARIA roles</div>
    <div role="checkbox">Checkbox without aria-checked</div>
    <div role="slider">Slider without aria-valuemin, aria-valuemax or aria-valuenow</div>
    <div>
        For Google,<a href="http://google.com/"> click here.</a>
    </div>
    <div id="focusable">
    </div>

</body>
</html>
